import { View, Navigator, ScrollView, Image } from '@tarojs/components'
import { useCategories } from 'src/hooks/useCategories';
import { useShareAppMessage } from '@tarojs/taro';

import CateDefaultImage from 'src/assets/image/cate-default.svg'

import './index.less'

function ClassList() {
  const [categories, fetchCategories, fetchLoading] = useCategories()

  useShareAppMessage(() => {
    return {
      title: '首页',
      path: '/pages/home/index',
    }
  })

  return (
    <ScrollView
      scrollY
      scrollWithAnimation
      refresherEnabled
      refresherTriggered={fetchLoading}
      onRefresherRefresh={fetchCategories}
      refresherThreshold={45}
      style={{height: '100vh'}}
    >
      <View className='header'>
        <View className='header-name'>
          出品档口
        </View>
      </View>
      <View className='body class-body'>
        {
          categories.map(item => (
            <Navigator
              key={item.id}
              url={`/pages/food/index?id=${item.id}`}
              className='class-item'
            >
              <Image
                src={item.image || CateDefaultImage}
                className='class-item__image'
                mode='aspectFit'
              />
              <View className='class-item__name'>
                {item.name}
              </View>
            </Navigator>
          ))
        }
      </View>
    </ScrollView>
  );
}

export default ClassList;
